<template>
  <div class="login">
    <p class="register" @click="handleLogin">登陆</p>
    <h2>你好<br />欢迎来到Xchange</h2>
    <van-form
      @submit="onSubmit"
      ref="loginForm"
      :model="login"
      :rules="rules"
      class="login-form"
    >
      <van-field
        v-model="login.email"
        name="email"
        placeholder="请输入邮箱"
        prop="email"
        :rules="rules.email"
        class="mail-box"
      />
      <div class="form-captcha">
        <van-field
          v-model="login.captcha"
          name="captcha"
          prop="captcha"
          placeholder="请输入邮箱验证码"
          :rules="rules.captcha"
          class="captcha-box"
        />
        <van-button
          type="primary"
          class="send-captcha"
          :disabled="sendDisableBtn"
          @click="handleCaptcha"
        >
          {{ captchaBtn.text }}
        </van-button>
      </div>
      <div class="form-captcha">
        <van-field
          v-model="login.captcha"
          name="captcha"
          prop="captcha"
          placeholder="请输入验证码"
          :rules="rules.captcha"
          class="captcha-box"
        />
        <img @click="handleImgCaptcha" :src="code.captcha" alt="" />
      </div>
      <van-field
        v-model="login.password"
        name="password"
        placeholder="请输入password"
        prop="password"
        type="password"
        :rules="rules.password"
        class="passwd-box"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          :disabled="submitDisableBtn"
          type="primary"
          native-type="submit"
        >
          注册
        </van-button>
      </div>
    </van-form>
    <!-- <span class="password">密码登录</span> -->
  </div>
</template>

<script>
import md5 from 'md5'
export default {
  data() {
    return {
      login: {
        email: "",
        password: "",
        captcha: "",
      },
      passCaptcha: false,
      passMail: false,
      captchaBtn: {
        text: "获取验证码",
        send: false,
        timer: 30,
      },
      code: {
        captcha: "/api/captcha?_t" + new Date().getTime(),
      },
      rules: {
        email: [
          { required: true, type: "email" },
          { validator: this.validatorMail, message: "邮箱格式不正确" },
        ],
        captcha: [
          { required: true },
          { validator: this.validatorCaptcha, message: "验证码不正确" },
        ],
        password: [
          { required: true },
          { validator: this.validatorPasswd, message: "请输入6-12位的密码" },
        ],
      },
    };
  },
  methods: {
    name: "register",
    async onSubmit() {
      console.log("on submit");
      const params = {
        ...this.login,
        nickname: 'hahaha',
        passwd: md5(this.login.password),
      }
      const ret = await this.$http.post('user/register', params)
      console.log('ret', ret);
      if(ret.code === 0) {
        // this.$toast.success('注册成功，请登陆')
        this.$notify({type: 'success', message: '注册成功，请登陆'})
        this.$router.push('/login')
      } else {
        this.$notify({type: 'warning', message: ret.message})
      }
    },
    handleLogin() {
      this.$router.push("/login");
    },
    handleCaptcha() {
      if (!this.captchaBtn.send && this.login.email) {
        this.captchaBtn.send = true;

        let timer = setInterval(() => {
          this.captchaBtn.timer--;
          this.captchaBtn.text = `已发送(${this.captchaBtn.timer})`;
          if (this.captchaBtn.timer <= 0) {
            timer = clearInterval(timer);
            this.captchaBtn.send = false;
            this.captchaBtn.timer = 30;
            this.captchaBtn.text = "获取验证码";
          }
        }, 1000);
      }
    },
    handleImgCaptcha() {
      this.code.captcha = "/api/captcha?_t" + new Date().getTime();
    },
    validatorMail(val) {
      console.log("validatorMail", val);
      const ret = /^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
      this.passMail = ret;
      return ret;
    },
    validatorCaptcha(val) {
      console.log("validatorCaptcha", val);
      const ret = /^\w{4}$/.test(val);
      this.passCaptcha = ret;
      return ret;
    },
    validatorPasswd(val) {
      console.log('validatorPasswd val', val);
      const ret = /^\w{6,12}$/.test(val);
      return ret
    }
  },
  computed: {
    sendDisableBtn() {
      return this.captchaBtn.send || !this.passMail;
    },
    submitDisableBtn() {
      return !(this.passCaptcha && this.passMail);
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  flex-direction: column;
  padding: 25px 25px 0 40px;
  .register {
    align-self: flex-end;
    font-size: 16px;
    font-family: PingFang SC;
    color: #666666;
    line-height: 28px;
  }
  h2 {
    text-align: left;
    font-size: 23px;
    font-weight: bold;
    color: #333333;
    line-height: 34px;
    margin-top: 80px;
  }
  .login-form {
    margin-top: 35px;
    .captcha-box {
      flex: 1;
    }
    .form-captcha {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
    }
  }
  .passwd-box {
    margin-top: 10px;
  }
  .password {
    margin-top: 20px;
    font-size: 16px;
    font-family: PingFang SC;
    color: #666666;
    line-height: 28px;
  }
}
</style>